<template>
  <div>
    <el-slider
      v-model="spancelNum"
      :max="24"
      :min="1"
      :marks="{ 12: '' }"
      :step="1"
      show-stops
      @change="spanChange"
    />
  </div>
</template>
<script>
export default {
  props: ['spannum'],
  data() {
    return { spancelNum: 8 }
  },
  methods: {
    spanChange(val) {
      //  this.spancelNum = val
      this.$emit('update:spannum', this.getvalue(this.spannum, val))
    },
    setDefaultValue(val) {
      if (typeof val === 'number') {
        return val
      }
      return 8
    },
    getvalue(oldval, newval) {
      if (Array.isArray(oldval)) {
        return newval.split(',')
      }
      // if (['string', 'number'].indexOf(typeof val) > -1) {
      //   return val
      // }
      if (typeof newval === 'number') {
        return parseInt(newval)
      }
      console.log(typeof oldval)
      if (typeof oldval === 'boolean') {
        return newval === 'true' || newval === '1'
      }
      return newval
    }
  },
  mounted() {
    this.spancelNum = this.setDefaultValue(this.spannum)
  },
  watch: {
    spancelNum(val) {
      this.$emit('update:spannum', this.getvalue(this.spannum, val))
    },
    spannum(val) {
      this.spancelNum = this.setDefaultValue(val)
    }
  }
}
</script>
